import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Item {
    id: root
    width: 800; height: 100
    property color textColor: "white"
    property color backColor: "black"
    property color btnColor: "grey"

    signal okBtnClicked()
    Rectangle {
        id: rootRect
        width: root.width; height: root.height
        anchors.fill: parent
        color: backColor
        Rectangle{
            id: btnRect
            width: rootRect.width/8*3; height: root.height
            anchors.right: rootRect.right
            anchors.verticalCenter: rootRect.verticalCenter
            color: backColor
            Button{
                id: okBtn
                width: btnRect.width*0.6; height: btnRect.height*0.5
                anchors.right: btnRect.right
                anchors.rightMargin: btnRect.width/16
                anchors.verticalCenter: parent.verticalCenter
                Text{
                    text: "OK"
                    font {bold: true; pixelSize: 26}
                    anchors.centerIn: parent
                    color: textColor
                }
                style: btnStyle
                onClicked: okBtnClicked()
            }
            Component{
                id: btnStyle
                ButtonStyle{
                    background: Rectangle{
                        border.color: "white"
                        border.width: control.hovered ? 2 : 1
                        color: control.hovered? Qt.darker(btnColor, 2) : btnColor
                        radius: 5
                    }
                }
            }
        }
    }
}

